<div id="comments_container">
{{poi.title}}
    <ul id="comments">
        {%for comment in comments%}
            <li>
                <div class=".comment">{{comment.comment}}</div>
                <div class=".author">{{comment.user.user.nickname}}</div>
            </li>
        {%endfor%}
    </ul>
    <form action="#" onsubmit="addComment({{poi.key.id}});return false;">
        <textarea id="newComment"></textarea> 
        <br/>
        <input type="submit" value="Add Comment"/>
    </form>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        function addComment(id){
            $.post('/add_comment',{'poi_id':id, 'comment':$('#newComment').val()}, function(data){
                $("#comments").append('<li>'+
                        '<div class=".comment">'+data.comment+'</div>'+
                        '<div class=".author">'+data.user+'</div>'+
                    '</li>');
                $('#newComment').val('');
            }, 'json');
            return false;         
        }
    </script>
</div>
